<template>
  <div>
    <h2>vue面试题：computed的用法</h2>
    <h3 :class="getClassName">test无参数</h3>
    <h3 :class="getClassNameParmas(2)">test有参数</h3>
    <div>宽：{{ w }},高：{{ h }}</div>
    <div>面积（无参数）:{{ getArea }}</div>
    <div>面积（有参数）:{{ getAreaParmas(6) }}</div>

    <button @click="flag = !flag">改变flag值</button>
    <button @click="getArea = 666">改变getArea值</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: true,
      w: 4,
      h: 5,
    };
  },
  computed: {
    // 无参数 - 简写形式
    getClassName: function () {
      return this.flag ? "red" : "green";
    },
    // 有参数 - 简写形式
    getClassNameParmas: function () {
      return function (val) {
        return this.flag && val === 2 ? "red" : "green";
      };
    },

    // 无参数 - 完成形式
    getArea: {
      get: function () {
        return this.w * this.h;
      },
      set: function (val) {
        console.log(val);
      },
    },

    // 有参数 - 完成形式
    getAreaParmas: {
      get: function () {
        return function (val) {
          return this.w * this.h * val;
        };
      },
      set: function (val) {
        console.log(val);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.red {
  color: red;
}
.green {
  color: green;
}
</style>
